<template>
  <view class="relative" style="z-index: 9999;">
    <scroll-view id="tab-bar" class="scroll-h-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto2">
      <view v-for="(tab,index) in tabBars22" :key="tab.id" class="uni-tab-item items" :id="tab.id" :data-current="index"
        @click="ontabtap2">
        <text v-if="index == 3" style="margin: 0 50rpx 0 30rpx;color: #CCCCCC;">|</text>
        <text class="uni-tab-item-title items2" :class="tabIndex2==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
      </view>
    </scroll-view>

    <view class="setting u-f-ajc">
      <view @click="goPage" class="cuIcon-settings"></view>
    </view>



  </view>

</template>

<script>
  export default {
    props: ['tabBars'],
    watch: {
      tabBars() {
        this.tabBars22 = this.tabBars
      }
    },
    data() {
      return {
        scrollInto2: "",
        tabIndex2: -1,
        tabBars22: this.tabBars,
      }
    },
    methods: {
      ontabtap2(e) {
        let index = e.target.dataset.current || e.currentTarget.dataset.current;
        this.tabIndex2 = index;
        this.scrollInto2 = this.tabBars22[index].id;
        this.$emit("scrollTwo", this.scrollInto2)
      },
      goPage() {
        uni.navigateTo({
          url: '/pagesA/trial_class/add_tag',
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .scroll-h-h {
    width: 750rpx;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    flex-direction: row;
    padding: 20rpx;
    box-sizing: border-box;

    .items {
      padding: 0 14rpx;

      .items2 {
        background-color: #F0EEF1;
        padding: 20rpx 30rpx;
        font-size: 24rpx;
      }
    }

    white-space: nowrap;
  }

  .setting {
    width: 80rpx;
    height: 50rpx;
    position: absolute;
    right: 20rpx;
    top: 50%;
    margin: -25rpx 0 0;
    z-index: 9;
    background-color: rgba(255, 255, 255, 0.7);
  }

  .uni-tab-item-title-active {
    color: #FFFFFF;
    background-color: $uni-color-zhuti !important;
  }
</style>
